<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
  </head>
  <body>
    <h3>Main page</h3>
    <div>
      <div ui-view></div>
    </div>
    <script>
      angular.module("myApp", ["ui.router"]).config(function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.when("","/PageTab");
        $stateProvider
          .state("PageTab", {
            url:"/PageTab",
            template: `
            <div>
              <h2>PageTab</h2>
              <div>
                <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
                <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
              </div>
              <div ui-view=""></div>
            </div>

            `,
          })
          .state("PageTab.Page1", {
            url: "/Page1",
            template: `<h2>Page1</h2>`,
          })
          .state("PageTab.Page2", {
            url: "/Page2",
            template: `<h2>Page2</h2>`,
          });
      });
    </script>
  </body>
</html>
